<template>
	<view class="sublet">
		<form @submit.prevent="submit">
			<label for="name">姓名:</label>
			<input type="text" id="name" v-model="form.name" placeholder="请输入" required>
			<br>
			<label for="phone">手机号:</label>
			<input type="tel" id="phone" v-model="form.phone" placeholder="请输入" required>
			<br>
			<label for="emergencyContact">紧急联系人:</label>
			<input type="text" id="emergencyContact" v-model="form.emergencyContact" placeholder="请输入" required>
			<br>
			<label for="emergencyContactPhone">紧急联系人电话:</label>
			<input type="tel" id="emergencyContactPhone" v-model="form.emergencyContactPhone" placeholder="请输入"
				required>
			<br>
			<!-- 上传身份证正面和反面的部分需要你自己实现，可以使用原生的<input type="file"> -->
			<!-- <input type="file" accept="image/*" multiple> -->

			<button type="submit">提交</button>
		</form>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';

	// 响应式表单数据
	const form = reactive({
		name: '张三',
		phone: '12',
		emergencyContact: '1234',
		emergencyContactPhone: '123456',
	});

	// 提交方法
	const submit = () => {
		console.log(form);
		// 这里可以添加表单提交的逻辑，例如导航到另一个页面或发送数据到服务器
	};
</script>

<style scoped>
	.sublet {
		max-width: 600px;
		margin: 0 auto;
		padding: 20px;
		background-color: #f8f9fa;
		border: 1px solid #dee2e6;
		border-radius: 5px;
	}

	form {
		display: flex;
		flex-direction: column;
	}

	label {
		margin-top: 10px;

	}

	input {
		height: 40px;
		margin-top: 5px;
		text-indent: 1em;
		border: 1px solid #ced4da;
		border-radius: 5px;
	}

	button {
		margin-top: 20px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	button:hover {
		background-color: #0056b3;
	}
</style>